<template>
	<view class="container">
		<view class="header">
			<u-image :src="globalInfo.avatar_url" shape="circle" width="70rpx" height="70rpx"></u-image>
			<text class="title">{{globalInfo.nickname}}</text>
		</view>
		<!-- 累计奖励区域 -->
		<view class="content">
			<view class="top-info">
				<view class="t-item">
					<view class="desc">
						累计奖励（元）
					</view>
					<view class="total">
						{{globalInfo.global_money_total}}
					</view>
				</view>
				<view class="t-item">
					<view class="desc">
						累计积分（个）
					</view>
					<view class="total">
						{{globalInfo.sum_integral_total}}
					</view>
				</view>
			</view>
			
			<view class="bottom-info">
				<view class="b-item">
					<view class="money">
						{{globalInfo.send_money}}元
					</view>
					<view class="desc">
						已发放
					</view>
				</view>
				<view class="b-item">
					<view class="money">
						{{globalInfo.un_send_money}}元
					</view>
					<view class="desc">
						未发放
					</view>
				</view>
				<view class="b-item">
					<view class="money">
						{{globalInfo.withdraw_money}}元
					</view>
					<view class="desc">
						已提现
					</view>
				</view>
			</view>
		</view>
		
		<!-- 奖金池期数 -->
		<view class="pool-info" @click="handleBounsPool" v-if="globalInfo.global_number !== ''">
			<view class="title">
				<u-image  width="42rpx" height="42rpx" :src="icon" ></u-image>
				<text style="margin-left: 16rpx;">奖池{{globalInfo.global_number}}期</text>
			</view>
			<view class="desc">
				报单{{globalInfo.report_num}}次 奖励积分{{globalInfo.report_integral}} 奖励{{globalInfo.report_money}}元>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		
		<!-- tabs -->
		<view class="tabs">
			<view class="item" v-for="item in tabList" :key="item.name" @click="handleItem(item)">
				<view>
					<u-image width="60rpx" height="60rpx" :src="item.img"></u-image>
				</view>
				<text class="title">{{item.name}}</text>
			</view>
		</view>

	</view>
</template>

<script>
	import {getGlobalInfo} from '@/global/api/report.js'
	import list from '../static/image/globalList.png';
	import pool from '../static/image/globalPool.png';
	import log from '../static/image/globalLog.png';
	import tixian from '../static/image/globalTi.png';
	import icon from '../static/image/globalIcon.png';
	import withdrawImg from '../static/image/icon6.png'
	export default {
		data() {
			return {
				tabList: [
					{
						name:'报单列表',
						img: list,
						path: '/global/list/list'
					},
					{
						name:'奖金池',
						img: pool,
						path: '/global/globalBonusPool/globalBonusPool'
					},
					{
						name:'积分记录',
						img: log,
						path: '/global/IntegralLog/IntegralLog'
					},
					{
						name:'账户提现',
						img: tixian,
						path: '/global/globalCash/globalCash'
					},
					{
						name: '申请提现',
						img: withdrawImg,
						path: '/global/withdraw/withdraw'
					}
				],
				globalInfo: {},
				icon: icon
			}
		},
		onShow() {
			uni.hideTabBar()
			this.getGlobalInfoAPI()
		},
		methods: {
			async getGlobalInfoAPI() {
				const res = await getGlobalInfo()
				this.globalInfo = res.data
			},
			handleItem(item) {
				let path = ''
				if (item.name == '奖金池') {
					if (this.globalInfo.pool_id === '') return uni.showToast({
						title: '当前奖金池为空',
						icon: 'none'
					})
					path = `${item.path}?id=${this.globalInfo.pool_id}`
				} else {
					path = item.path
				}
				uni.navigateTo({
					url: path
				})
			},
			handleBounsPool() {
				const id = { pool_id : this.globalInfo.pool_id }
				uni.navigateTo({
					url : '/global/globalBonusPool/globalBonusPool?id=' + this.globalInfo.pool_id
				})
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding: 40rpx 30rpx;
		height: 100vh;
		// background-color: rgb(242, 242, 242);
		background: linear-gradient(to bottom, rgb(255, 241, 246), rgb(242, 242, 242));
		.header {
			display: flex;
			align-items: center;
			height: 110rpx;
			padding-left: 20rpx;
			.title {
				margin-left: 20rpx;
				font-weight: bold;
			}
		}
		
		.content {
			height: 360rpx;
			background-color: #fff;
			border-radius: 40rpx;
			padding: 35rpx;
			margin-bottom: 30rpx;
			.top-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				border-bottom: 1px solid #f2f2f2;
				height: 50%;
				.t-item {
					.desc {
						color:gray;
					}
					.total {
						font-weight: bold;
					}
				}
			}
			
			.bottom-info {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 50%;
				.b-item {
					// width: 30%;
					text-align: center;
					.money {
						font-weight: bold;
					}
					.desc {
						color:gray;
					}
				}
			}
		}
		
		.pool-info {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 20rpx;
			height: 100rpx;
			background-color: #fff;
			border-radius: 30rpx;
			.title {
				display: flex;
				align-items: center;
				width: 30%;
				font-weight: bold;
			}
			.desc {
				font-size: 24rpx;
			}
		}
		
		.tabs {
			display: flex;
			flex-wrap: wrap;
			margin-top: 50rpx;
			.item {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				width: 20%;
				margin-top: 15rpx;
				// margin-right: 14rpx;
				.title {
					margin-top: 16rpx;
					font-size: 22rpx;
					color: #262626;
				}
			}
		}
	}
</style>
